<%@ page contentType="text/html; charset=utf-8" language="java"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="./css/main.css" type="text/css" />
<script src="./js/jquery-1.6.4.js" type="text/javascript"></script>
<script src="./js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/languages/messages_cn.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.metadata.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/validateForm/formId.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery.metadata.setType("attr", "rules");
/*$.validator.setDefaults({
	
});*/
$('input').bind('focus', function () {alert('get focus');});  
var validator=null;
$(function(){
	/*$("#formId").validate({
		submitHandler:function(form){
        	alert("submitted");    
        	form.submit();
		}
    });*/
    validator=jQuery("#formId").validate(formElem);
    $("#btn_reset").click(function() {//重置表单元素要加入：jquery.form.js
        validator.resetForm();
    });

    $("#btn_submit").click(function(){//验证表单元素，调用对象的form方法
    	if(validator.form()){//验证通过就提交表单
    		$("#formId").submit();//通过jQuery提交表单,触发表单的submit事件。还有一种ajax方式来提交表单不会刷新页面（查资料）
    		<%--document.form1.submit();//通过js方式提交表单--%>
    	}
    });
	
});
</script>
</head>
<style>
body{
font-size:13px;
color:#333;
line-height:175%;
margin:0 auto;
background:#fff;
}

.style1 {font-size: 12px}
.STYLE2 {color: #FF0000}

</style>
<style type="text/css">
    /*jQuery.Validate自定义样式开始*/
    #formId label.error{
    		font-weight: bold;
    		float:none;
            background: url(./images/unchecked.gif) no-repeat 0px 0px;
            background-color:#C5BEA9;
            color: Red;
            padding-left: 1.5em;
            vertical-align:top;
            position:absolute;
            z-index:1;
    }
    #formId label.success{
    		float:none;
            background: url(./images/checked.gif) no-repeat 0px 0px;
            padding-left: 1.5em;
            vertical-align:top;
    }
    input.error{
            border: dashed 1px red;
            background-color: yellow;
    }
   	/*jQuery.Validate自定义样式结束*/
</style> 
<body leftmargin="0" topmargin="0">
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
    <Td align="center"><div style="width:98%;">
        <form id="formId" name="form1" action="www.baidu.com" method="post">
          <fieldset>
          <legend>用户信息修改</legend>
          <table border="0" width="100%" cellpadding="0" cellspacing="1">
            <tr>
              <th class="title_table" colspan="5">登录信息</th>
            </tr>
            <tr bgcolor="#ffffff">
              <th width="21%" >&nbsp;用户名:<font color="#FF0000">*</font></th>
              <td width="27%" >
              <!-- <input value=""  class="required" minlength="2" type="text" name="userName" /> -->
			  <!-- <input value=""  rules="{required:true,minlength:2,messages:{required:'请输入内容，这个是必填项！',minlength:'这个长度不能少于2个字符哦！'}}" type="text" name="userName" />-->
			  <input value="" class="ignore" rules="{required:true,messages:{required:'请输入内容，这个是必填项！'}}" type="text" name="model.userName" />
			  <!-- jQuery.validate插件在此处自动生成元素<label class="error" for="userName" generated="true">Please enter at least 2 characters.</label> -->
			  </td>
              <th width="18%" >&nbsp;密码:<font color="#FF0000">*</font></th>
              <td width="34%"><input name="model.password" type="text" value=""/></td>
            </tr>
            <tr>
              <th>&nbsp;确定密码:<font color="#FF0000">*</font></th>
              <td><input type="text" value="" name="model.confirmPassword"/></td>
              <th>&nbsp;出生日期:<font color="#FF0000">*</font></th>
              <td><input name="birthDate" type="text" value=""/></td>
            </tr>
            <tr>
              <th>&nbsp;性别:<font color="#FF0000">*</font></th>
              <td valign="bottom"><input type="radio" value="男" name="model.sex"/>男,&nbsp;&nbsp;&nbsp;
           		<input type="radio" value="女" name="model.sex"/>女<em></em></td>
              <th>&nbsp;爱好:<font color="#FF0000">*</font></th>
              <td><input name="model.interest" type="checkbox" value="足球"/>足球,
              <input name="model.interest" type="checkbox" value="篮球"/>篮球<em></em>
            </tr>
          </table>
          
		  <table border="0" width="100%" cellpadding="0" cellspacing="1" bgcolor="#9eb3d0">
            <tr>
              <th class="title_table" colspan="4">企业信息</th>
            </tr>
            <tr bgcolor="#ffffff">
              <th >注册地址:<font color="#FF0000">*</font></th>
              <td ><input name="registerAddr" value="" size="32" maxlength="20"/></td>
              <th >注册地邮编:<font color="#FF0000">*</font></th>
              <td><input name="postcode" value="" size="20" maxlength="6"/></td>
            </tr>
            <tr bgcolor="#ffffff">
              <th >&nbsp;企业类型:<font color="#FF0000">*</font></th>
              <td colspan="4">
              <select name="select1">
                <option value="">--请选择--</option>
                <option>内资</option>
                <option>外资</option>
              </select></td>
            </tr>
            <tr bgcolor="#ffffff">
              <th >注册资本(金):<font color="#FF0000">*</font></th>
              <td colspan="4" ><input value="" size="10" maxlength="10" name="model.capital"/>万
              <select name="select2">
                  	<option value="">--请选择币种--</option>
                    <option>美元</option>
                    <option>人民币</option>
              </select></td>
            </tr>
            <tr bgcolor="#ffffff">
              <th >联系人手机:<font color="#FF0000">*</font></th>
              <td width="27%" ><input name="mobile" value="" size="32" maxlength="11"/></td>
            <th >电子邮箱: <font color="#FF0000">*</font> </th>
              <td  width="34%" ><input name="email" value="" size="40" maxlength="30" /></td>
            </tr>
          </table>
		 </fieldset>
		 <input type="submit" value="表单提交"/>
		 <input type="reset" value="表单重置"/>
        </form>
      </div></Td>
  </tr>
</table>
<div style="width:100%;text-align:center;"><div align="center">
 <button id="btn_submit" type="submit" class="btn_input">保存</button>
 <button id="btn_reset" class="btn_input">重置</button>
                      </div>
<br /></div>
<script type="text/javascript">
	function prepare(){
		//var obj={name:'zhangsan',age:18,sex:'男',eat:function(){alert("我要吃饭")},sport:function(sportType){alert("我喜欢这项"+sportType+"运动")}}
		//obj.sport('swimming');
		//jQuery('#formId').validationEngine('validate');
		//var pp=$.prototype;
		//alert($.prototype);
		//var ff=new jQuery.fn.init();
		//alert(ff.length);
		//var validator=$("#formId").validate(formElem);
		//validator.form();
	}
</script>
</body>

</html>
